<div class="form-group">
    <label class="col-lg control-label">可用权限</label>
    <div class="col-sm-9 col-xs-12">
        <div id="accordion" class="panel-group">
            <div class='panel panel-default'>
            {foreach name="perms" key='key' item="value"}
                <div class='panel-heading' style='background:#f8f8f8' >
                    <a class="btn btn-link btn-sm pull-right" data-toggle="collapse"  data-parent="#accordion" href="#collapse{$key}"><i class='fa fa-angle-down'></i> 展开</a>
                    <label class='checkbox-inline'>
                        <input type='checkbox' id="perm_{$key}" name="rule_ids[]" value="{$value['id']}" class='perm-all' data-group='{$key}' {if condition="in_array($value['id'],$item['rules'])"} checked="checked"{/if}/> {$value['title']}
                    </label>
                </div>
                <div id="collapse{$key}" class="panel-collapse {if $key==1}in{else}collapse{/if}">
                    <div class='panel-body perm-group'>
                        {foreach name="value['_data']" key='ke' item='val'}
                        {if count($val) >1}
                        <span>
                            <label class='checkbox-inline'>
                                <input type='checkbox' name="rule_ids[]" value="{$val['id']}" class='perm-all-item' data-group='{$key}' data-parent='text' {if condition="in_array($val['id'],$item['rules'])"} checked="checked"{/if}/>  <b>{$val['title']}</b>
                            </label>
                            {foreach name="val['_data']" key='k' item='v'}
                                <label class='checkbox-inline'>
                                    <input type='checkbox' name="rule_ids[]"  value="{$v['id']}" class='perm-item' data-group='{$key}' data-parent='{$ke}' data-son="{$k}" {if condition="in_array($v['id'],$item['rules'])"} checked="checked"{/if}/> {$v['title']}
                                </label>
                            {/foreach}
                        </span>
                        <br>
                        {/if}
                        {/foreach}
                    </div>
                </div>
            {/foreach}
            </div>
        </div>
    </div>
</div>
<script language="javascript">
    $(function () {
        $('.perm-all').click(function () {
            var checked = $(this).get(0).checked;
            var group = $(this).data('group');
            $(".perm-item[data-group='" + group + "'],.perm-all-item[data-group='" + group + "']").each(function () {
                $(this).get(0).checked = checked;
            })
        })
        $('.perm-all-item').click(function () {
            var checked = $(this).get(0).checked;
            var group = $(this).data('group');
            var parent = $(this).data('parent');
            var son = $(this).data('son');
            var grandson = $(this).data('grandson');
            $(this).parents("span").find(".perm-item").each(function () {
                $(this).get(0).checked = checked;
            });
            group_check(this);

        });
        $('.perm-item').click(function () {
            var group = $(this).data('group');
            var parent = $(this).data('parent');
            var son = $(this).data('son');
            var grandson = $(this).data('grandson');
            var check = false;
            $(this).closest('span').find(".perm-item").each(function () {
                if ($(this).get(0).checked) {
                    check = true;
                    return false;
                }
            });
            var allitem = $(this).parents("span").find(".perm-all-item");
            if (allitem.length == 1) {
                allitem.get(0).checked = check;
            }
            group_check(this);

        });

        $(".panel-body").find("span").each(function (index, item) {
            if ($(this).find("label").length != 1) {
                $($(this).find("label").get(0)).wrap("<div class='col-sm-2' style='white-space:nowrap;'></div>");
                $($(this).find("label").not($(this).find("label").get(0))).wrapAll("<div class='col-sm-10'></div>");
            }
            else {
                $($(this).find("label").get(0)).wrap("<div class='col-sm-12'></div>");
            }
        });

    });

    function group_check(obj) {
        var check = false;
        $(obj).parents('.perm-group').find(":checkbox").each(function (index, item) {
            if (item.checked) {
                check = true;
            }
        });
        var group = $(obj).eq(0).data('group');
        $(".perm-all[data-group=" + group + "]").get(0).checked = check;
    }
</script>